<template>
  <div>
    <el-row>
      <el-col :span="20">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input v-model="tName" placeholder="教师姓名"></el-input>
          </el-form-item>
          <el-form-item label="名师">
            <el-select v-model="isFamous" placeholder="是否名师">
              <el-option label="<==请选择==>" value=""></el-option>
              <el-option label="名师" value="y"></el-option>
              <el-option label="普师" value="n"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4">
        <el-button type="success" @click="dialogFormVisible = true">添加</el-button>
      </el-col>
    </el-row>
    <hr>
    <el-table
      :data="teacherList"
      style="width: 100%">
      <el-table-column
        label="头像"
        width="180">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="'http://localhost:9092/' + scope.row.avatar"
            fit="contain"></el-image>
        </template>
      </el-table-column>
      <el-table-column
        label="姓名"
        width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>简介: {{ scope.row.career }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="学历"
        width="180px"
        prop="education">
      </el-table-column>

      <el-table-column
        label="是否名师"
        width="180">
        <template slot-scope="scope">
          {{ scope.row.isFamous === 'y' ? '是' : '否'}}
        </template>
      </el-table-column>
      <el-table-column
        label="学科"
        width="180px"
        prop="subjectName">
      </el-table-column>

      <el-table-column
        label="状态"
        width="180">
        <template slot-scope="scope">
          {{ scope.row.status === 'y' ? '可用' : '禁用'}}
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="queryTeacher"
      :current-page="pageInfo.pageNum"
      :page-sizes="[3, 5, 7, 9]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>

    <el-dialog title="添加讲师" :visible.sync="dialogFormVisible" width="40%">
      <el-form ref="teacher" :model="teacher" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="teacher.name"></el-input>
        </el-form-item>
        <el-form-item label="学科">
          <el-select v-model="teacher.subjectId" placeholder="请选择">
            <el-option
              v-for="subject in subjectList"
              :key="subject.id"
              :label="subject.name"
              :value="subject.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教育经历">
          <el-input v-model="teacher.education"></el-input>
        </el-form-item>
        <el-form-item label="是否名师">
          <el-radio v-model="teacher.isFamous" label="y">是</el-radio>
          <el-radio v-model="teacher.isFamous" label="n">否</el-radio>
        </el-form-item>
        <el-form-item label="简介">
          <el-input type="textarea" v-model="teacher.career"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:9091/admin/teacher/upload"
            :show-file-list="false"
            name="headerImg"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveTeacher">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "TeacherList",
  data() {
    return {
      tName: '',
      isFamous: '',
      now: 1,
      size: 3,
      teacherList: [],
      pageInfo: {},
      teacher: {
        name: '',
        education: '',
        career: '',
        isFamous: '',
        avatar: '',
        subjectId: ''
      },
      subjectList: [],
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      imageUrl: ''
    }
  },
  methods: {
    queryTeacher(now) {
      this.$axios.get("http://localhost:9091/admin/teacher/list", {
        params: {
          name: this.tName,
          isFamous: this.isFamous,
          now: now,
          size: this.size
        }
      }).then(data => {
        if (data.data.code === 200) {
          this.teacherList = data.data.data.list;
          this.pageInfo = data.data.data;
          this.size = this.pageInfo.pageSize;
          console.log(data);
        }
      })
    },
    querySubject() {
      this.$axios.get("http://localhost:9091/admin/subject/allSubject")
        .then(data => {
          this.subjectList = data.data.data;
        })
    },
    handleSizeChange(val) {
      this.size = val;
      this.queryTeacher(1);
    },
    onSubmit() {
      this.size = 3;
      this.queryTeacher(1);
    },

    handleAvatarSuccess(res, file) {
      console.log(res);
      console.log(file);
      if (res.code == 200) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.teacher.avatar = res.data;
      }

    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    saveTeacher() {
      this.$axios({
        method: "post",
        url: "http://localhost:9091/admin/teacher/save",
        data: this.teacher,
        header: {
          'Content-Type':'application/json'
        }
      }).then(data => {
          if (data.data.code == 200) {
            this.$message.success("添加成功");
            this.dialogFormVisible = false;
            this.onSubmit();
          } else {
            this.$message.error(data.data.msg);
          }
        })
    }
  },
  mounted() {
    this.queryTeacher();
    this.querySubject();
  },
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
